<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.css" />
</head>
<body>
    <!-- content -->
    <div id="myholder"></div>

    <!-- dependencies 通过CDN加载依赖-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.js"></script>

    <!-- code -->
    <script type="text/javascript">
	// https://www.cnblogs.com/liuyungao/p/5624163.html 【JointJS流程图】
	/*
		相比Dagre-D3和jsPlumb，JointJS的API很详细，代码量少，连接线有多种选择，封装了多种常用的形状，而且能画的图很多，官方也给了一些demo可以参考。
		
		Dagre-D3最大的优点就是可以实现自动布局，你只需要put数据就可以了，但是缺点就是自动布局后的连线会比较乱，而且连线不是横平竖直的
		
	*/    
    
    
    	// https://www.cnblogs.com/helica/p/11354577.html 【JointJS：JavaScript 流程图绘制框架】
    	//	 Joint: 配合上 dagre 可以画出像模像样的流程图。
    	//   Rappid 是 Joint 的商业版，提供了一些更强的插件



        var graph = new joint.dia.Graph;

        var paper = new joint.dia.Paper({
            el: document.getElementById('myholder'),
            model: graph,
            //width: 600,
            //height: 100,
            gridSize: 1
        });

        var rect = new joint.shapes.standard.Rectangle();
        rect.position(100, 30);
        rect.resize(100, 40);
        rect.attr({
            body: {
                fill: 'blue'
            },
            label: {
                text: 'Hello',
                fill: 'white'
            }
        });
        rect.addTo(graph);

        var rect2 = rect.clone();
        rect2.translate(300, 0);
        rect2.attr('label/text', 'World!');
        rect2.addTo(graph); 

        var link = new joint.shapes.standard.Link();
        link.source(rect);
        link.target(rect2);
        link.addTo(graph);
        
        var rect3 = rect2.clone();
        rect3.translate(300, 0);
        rect3.attr('label/text', 'You!');
        rect3.addTo(graph);        

        var link = new joint.shapes.standard.Link();
        link.source(rect2);
        link.target(rect3);
        link.addTo(graph);        

    </script>
</body>
</html>